<template>
  <demoBlock title="基础用法" padding class="demo-badge">
    <vcu-badge :content="5">
      <div class="demo-item" />
    </vcu-badge>
    <vcu-badge :content="10">
      <div class="demo-item" />
    </vcu-badge>
    <vcu-badge content="Hot">
      <div class="demo-item" />
    </vcu-badge>
    <vcu-badge dot>
      <div class="demo-item" />
    </vcu-badge>
  </demoBlock>
</template>


<style lang="less" scoped>
.demo-badge {
  .demo-item {
    width: 40px;
    height: 40px;
    background: #f2f3f5;
    border-radius: 4px;
  }
  .vcu-badge__wrapper {
    margin-right: 20px;
  }
}
</style>